<template>
    <el-dialog :title="title" :visible.sync="showModel" min-width="800px" :close-on-click-modal="false">
        <div>
            <el-form ref="authRuleForm" label-width="120px" @submit.native.prevent>
                <el-form-item label="价格体系" prop="date">
                    <el-radio v-model="price_system" :label="1">全渠道</el-radio>
                    <el-radio v-model="price_system" :label="2">甲渠道</el-radio>
                </el-form-item>
                <el-form-item label="房价来源" prop="date">
                    <el-radio v-model="room_price_source" :label="1">自动获取</el-radio>
                    <el-radio v-model="room_price_source" :label="2">手动设置</el-radio>
                </el-form-item>
                <el-form-item label="渠道价比率(%)" prop="date" v-if="room_price_source == 1">
                    <!-- <el-input placeholder="请输入比率" v-model="channel_price_ratio" clearable>
                    </el-input> -->
                    <el-input-number v-model="channel_price_ratio" controls-position="right" :precision="0" :min="-100" :max="100"></el-input-number>
                    <!-- <el-slider v-model="channel_price_ratio" show-input :format-tooltip="tooltip"></el-slider> -->
                </el-form-item>
            </el-form>
        </div>


        <div class="footer-button">
            <el-button @click="turnOff">取消</el-button>
            <el-button type="primary" @click="submitHandler('authRuleForm')">确认</el-button>
        </div>

    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            price_system: 1,
            room_price_source: 1,
            channel_price_ratio: 0
        };
    },
    props: {
        show: {
            default: false,
            type: Boolean
        },
        type: {
            default: 'setTime',
            type: String
        },
        authData: {
            default: () => { },
            type: Object
        }
    },
    computed: {
        showModel: {
            get() {
                return this.show;
            },
            set(val) {
                this.$emit('update:show', val);
            }
        },
        title() {
            return '设置特殊售卖';
        }
    },
    created() {
        console.log(this.authData);
        this.price_system = this.authData.price_system || 1
        this.room_price_source = this.authData.room_price_source || 1
        this.channel_price_ratio = this.authData.channel_price_ratio || 0
    },
    methods: {

        tooltip(val) {
            return val + "%"
        },
        submitHandler(form) {
            if (this.room_price_source ==1 && (this.channel_price_ratio == null)) {
                this.$message({
                    type: 'danger',
                    message: '渠道价比率不能为空'
                });
                return
            }
            this.$emit('update', { id: this.authData.id, price_system: this.price_system, room_price_source: this.room_price_source, channel_price_ratio: this.channel_price_ratio })
            this.turnOff();
        },
        turnOff() {
            this.showModel = false;
        }
    },

}
</script>
<style lang="scss" scoped>
.main {
    padding: 0 0px 0 20px;
}

.footer-button {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>